<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-19 14:37:50
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pagesrepair\repairdetail.vue
-->
<template>
    <view class="bg-page min-h-screen p-[32rpx] ">
        <view class="mb-[20rpx] page-top flex flex-col px-[32rpx] py-[40rpx] text-white text-base">
            <view class="flex flex-row items-center mb-[24rpx]">
                <view class="pr-[10rpx]">
                    <image v-if="state.pageData.status == '0'" src="/static/images/repair/repairStatus1.png"
                        class="w-[48rpx] h-[48rpx] " />
                    <image v-else-if="state.pageData.status == 10" src="/static/images/repair/repairStatus2.png"
                        class="w-[48rpx] h-[48rpx] " />
                    <image v-else src="/static/images/repair/repairStatus3.png" class="w-[48rpx] h-[48rpx] " />
                </view>
                <view class="self-start ">
                    {{ state.pageData.status_desc }}
                </view>
            </view>
            <view class="self-start">
                {{ state.pageData.status == 0 ? '请将手机寄送到门店，并将快递单号填写到下方' : state.pageData.status == 10 ? '已寄送给门店，请耐心等候～'
                    :
                    '交易已完成，祝您使用愉快' }}
            </view>
        </view>
        <!-- 回寄物流 -->

        <view v-if="state.pageData.receive_express_no" @click="toExpress(state.pageData.receive_express_no)"
            class="bg-white mb-[10px]">
            <view class="p-[32rpx] ">
                <view class="flex justify-between flex-row items-center mb-[38rpx]">
                    <view class="text-[36rpx] text-main font-extrabold ">回寄物流</view>
                </view>
                <view class="flex flex-row items-center self-stretch mt-[20rpx]">
                    <view class="pr-[10rpx]">
                        <image src="/static/images/repair/exprss.png" class="w-[48rpx] h-[48rpx] " />
                    </view>
                    <view class="flex-1 text-info u-line-1 max-w-[400rpx]">{{ state.pageData.receive_express_no }}
                    </view>
                    <view class="w-[180rpx] text-right text-primary">详情</view>
                </view>

            </view>
        </view>



        <!-- 返修物流 -->
        <view @click="toExpress(state.pageData.express_no)" class="bg-white mb-[10px]">
            <view class="p-[32rpx] ">
                <view class="flex justify-between flex-row items-center mb-[38rpx]">
                    <view class="text-[36rpx] text-main font-extrabold ">返修物流</view>
                </view>
                <view class="flex flex-row items-center self-stretch mt-[20rpx]">
                    <view class="pr-[10rpx]">
                        <image src="/static/images/repair/exprss.png" class="w-[48rpx] h-[48rpx] " />
                    </view>
                    <view class="flex-1 text-info u-line-1 max-w-[400rpx]">{{ state.pageData.express_no }}</view>
                    <view class="w-[180rpx] text-right text-primary">详情</view>
                </view>

            </view>
        </view>





        <!-- 返修地址 -->
        <view class="bg-white mb-[10px]">
            <view class="p-[32rpx] ">
                <view class="flex justify-between flex-row items-center mb-[38rpx]">
                    <view class="text-[36rpx] text-main font-extrabold ">返修地址</view>
                    <view @click="copy(state.pageData.store_info?.store_address)"
                        class="text-blue text-base cursor-pointer">复制地址</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">电话：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.store_info?.store_phone }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">地址：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.store_info?.repair_address }}</view>
                </view>
            </view>
        </view>

        <!-- 商品信息 -->
        <view class="bg-white mb-[10px] rounded-[16rpx]">
            <view class="p-[32rpx] ">
                <view class="flex justify-between flex-row items-center mb-[38rpx]">
                    <view class="text-[36rpx] text-main font-extrabold ">保单信息</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-center flex-row">
                    <view class="text-muted w-[160rpx]">保单名称：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.insurance?.name }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-center flex-row">
                    <view class="text-muted w-[160rpx]">保单价格：</view>
                    <view class="text-error flex-1">¥{{ state.pageData.insurance?.price }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-center flex-row">
                    <view class="text-muted w-[160rpx]">卡密：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.insurance?.orderinfo.card_pwd }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-center flex-row">
                    <view class="text-muted w-[160rpx]">手机imei：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.insurance?.orderinfo.imei }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-center flex-row">
                    <view class="text-muted w-[160rpx]">有效时间：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.insurance?.start_date }} 至
                        {{ state.pageData.insurance?.end_date }}
                    </view>
                </view>
                <view class="text-muted w-[160rpx] mb-[16rpx]">买保险照片</view>
                <view class="flex flex-wrap flex-row items-center">
                    <view @click="onPreviewImage(state.pageData.insurance?.orderinfo.imgs_arr, index)"
                        v-for="(item, index) in state.pageData.insurance?.orderinfo.imgs_arr" :key="index"
                        class="w-[160rpx] h-[160rpx] rounded-[8rpx] overflow-hidden mr-[20rpx] mb-[20rpx]">
                        <image :src="item" mode="aspectFill" class="w-full h-full"></image>
                    </view>
                </view>

            </view>
        </view>

        <!-- 报修信息 -->
        <view class="bg-white mb-[10px] rounded-[16rpx]">
            <view class="p-[32rpx] ">
                <view class="flex justify-between flex-row items-center mb-[38rpx]">
                    <view class="text-[36rpx] text-main font-extrabold ">报修信息</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">报修单号：</view>
                    <view class="text-c3 flex-1">{{ state.pageData?.order_no }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">报修时间：</view>
                    <view class="text-c3 flex-1">{{ state.pageData?.create_time }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">报修描述：</view>
                    <view class="text-c3 flex-1">{{ state.pageData?.remark }}</view>
                </view>
                <view class="text-muted w-[160rpx] mb-[16rpx]">报修照片</view>
                <view class="flex flex-wrap flex-row items-center">
                    <view @click="onPreviewImage(state.pageData?.imgs_arr, index)"
                        v-for="(item, index) in state.pageData?.imgs_arr" :key="index"
                        class="w-[160rpx] h-[160rpx] rounded-[8rpx] overflow-hidden mr-[20rpx] mb-[20rpx]">
                        <image :src="item" mode="aspectFill" class="w-full h-full"></image>
                    </view>
                </view>

            </view>
        </view>


        <view class="bg-white mb-[80px] rounded-[16rpx]">
            <view class="p-[32rpx] ">
                <view class="flex justify-between flex-row items-center mb-[38rpx]">
                    <view class="text-[36rpx] text-main font-extrabold ">维修结果</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">结果：</view>
                    <view class="text-c3 flex-1">{{ state.pageData?.check_remark }}</view>
                </view>

                <view class="text-muted w-[160rpx] mb-[16rpx]">附件</view>
                <view class="flex flex-wrap flex-row items-center">
                    <view @click="onPreviewImage(state.pageData?.check_img_arr, index)"
                        v-for="(item, index) in state.pageData?.check_img_arr" :key="index"
                        class="w-[160rpx] h-[160rpx] rounded-[8rpx] overflow-hidden mr-[20rpx] mb-[20rpx]">
                        <image :src="item" mode="aspectFill" class="w-full h-full"></image>
                    </view>
                </view>

            </view>
        </view>



        <view v-if="state.pageData?.status == '0'">
            <view :class="[isIPhoneX ? 'safe-bot' : '']"
                class="fixed left-0 right-0 bottom-0 w-full   h-[98rpx] leading-[98rpx] bg-white  text-center">
                <u-button @tap="toNum" type="primary">填写快递单号</u-button>
            </view>
        </view>

    </view>
</template>

<script setup lang="ts">
import { repairInfo } from '@/api/repair'
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import { computed, reactive, ref, shallowRef } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { useCopy } from '@/hooks/useCopy'
// 使用 useCopy 工具函数
const { copy } = useCopy();

const isIPhoneX = computed(() => {
    let systemInfo = uni.getSystemInfoSync();
    let safeArea = systemInfo.safeAreaInsets
    return (safeArea && safeArea.bottom > 0) ? true : false
})
const appStore = useAppStore()
const userStore = useUserStore()
const token = computed(() => userStore.token)

const state = reactive({
    repairId: '',
    pageData: {
    }
})
function onPreviewImage(pic_list: string[], index: number) {
    uni.previewImage({
        urls: pic_list,
        current: index
    });
}


function toExpress(no: string) {
    uni.navigateTo({
        url: `/pagesrepair/expressdetail?no=${no}`
    })
}
function toNum() {
    uni.navigateTo({
        url: `/pagesrepair/expressnum?repairId=${state.repairId}`
    })
}

const init = async () => {
    const data = await repairInfo({ id: state.repairId })
    state.pageData = data;
}
onLoad((options) => {
    state.repairId = options?.id || 0;
    state.repairId && init();

})
</script>

<style lang="scss" scoped>
.page-top {
    background: linear-gradient(180deg, #FF9554 0%, #EA590A 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
}
</style>
